<template>
<!-- 全局组件 -->
    <div class="FooterMusic">
        <!-- 左边内容 -->
        <div class="footerLeft" @click="updateDetailShow">
            <img :src="plaList[plaListIndex].al.picUrl" alt="" class="picUrl">
            <div>
                <p>{{plaList[plaListIndex].name}}</p>
                <span>横滑切换上下首歌曲</span>
            </div>
        </div>
        <!-- 右边内容 -->
        <div class="footerRight">
            <van-icon name="play-circle-o"  @click="play" v-if="isbtnShow"/>
            <van-icon name="pause-circle" @click="play" v-else/>
            <van-icon name="bars" />
        </div>
       <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${plaList[plaListIndex].id}.mp3 `"/>
          <van-popup
            v-model:show="detailShow"
            position="right"
            :style="{ height: '100%', width: '100%' }"
            >
            <MusicDetail 
                :musicList="plaList[plaListIndex]" 
                :play="play" 
                :isbtnShow="isbtnShow"
                :addDuration="addDuration"
            />
          </van-popup>

    </div>
</template>
<script>
import {mapMutations, mapState} from 'vuex'

import MusicDetail from '@/components/item/MusicDetail'
export default {
    data(){
        return{
            interVal: 0
        }
    },
    components:{
        MusicDetail
    },
    computed:{
        ...mapState(['plaList','plaListIndex','isbtnShow','detailShow'])
    },
    mounted(){
        //console.log(this.$refs)
         this.$store.dispatch("getLyric",this.plaList[this.plaListIndex].id)
   },
    updated(){
        this.$store.dispatch("getLyric",this.plaList[this.plaListIndex].id);
        this.addDuration();
    },
    methods:{
        play:function(){
            //判断音乐是否播放
           if(this.$refs.audio.paused){
            this.$refs.audio.play()
            this.updateIsbtnShow(false) //返回false表示正在播放
            //播放则调用函数进行传值
            this.updateTime()
           }else{
            this.$refs.audio.pause()
            this.updateIsbtnShow(true) //返回true表示暂停
            //暂停就清除定时器
            clearInterval(this.interVal);
           }
           
        },
        //歌曲进度条总时长
        addDuration(){
            this.updateDuration(this.$refs.audio.duration)
        },
        //
        updateTime:function(){
            //把 data 里面的 interVal 赋值给定时器
          this.interVal = setInterval(() => {
                this.updatecurrentTime(this.$refs.audio.currentTime)
            }, 1000); //每隔一秒钟执行一次
        },
        ...mapMutations([
            'updateIsbtnShow',
            'updateDetailShow',
            'updatecurrentTime',
            'updateDuration'
            ])
    },
    watch:{
        //监听如果下标发生了改变，则自动播放音乐
        plaListIndex:function(){
            this.$refs.audio.autoplay = true;
            if(this.$refs.audio.paused){//如果是暂停状态,改变图片        
                this.updateIsbtnShow(false);
            }
        },
        plaList:function(){
            if(this.isbtnShow){
                //如果为 true 则是暂停状态
                 this.$refs.audio.autoplay = true;
                 //让它播放音乐
                this.updateIsbtnShow(false)
            }
        }
    }
}
</script>
<style lang="less" scoped>
.FooterMusic{
    width: 100%;
    height: 1.4rem;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #999;
    background: #fff;
    display: flex;
    padding: .2rem;
    justify-content: space-between;
    .footerLeft{
        width: 55%;
        height: 100%;
        display: flex;
        justify-content:space-between;
        align-items: center;
        font-size: .29rem;
        .picUrl{
            width: 1rem;
            height: 1rem;
            border-radius:50%;
        }
    }
    .footerRight{
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        font-size: .55rem;
        align-items: center;
    }
}
</style>